<script lang="ts" setup>
import { ref, watch } from 'vue';
import { Tabs, TabPane, Checkbox, Empty } from 'ant-design-vue';
import ResourceCard from './ResourceCard.vue';
import type { ServiceType } from '#/api/wedding';

const props = defineProps<{
  resources: {
    dresses?: any[];
    artists?: any[];
    photographers?: any[];
  };
  selectedItems?: any[];
  multiple?: boolean;
}>();

const emit = defineEmits(['update:selectedItems', 'select']);

const activeTab = ref<ServiceType>('DRESS');
const localSelected = ref<any[]>(props.selectedItems || []);

watch(() => props.selectedItems, (val) => {
  localSelected.value = val || [];
});

const toggleSelect = (item: any, type: ServiceType) => {
  const index = localSelected.value.findIndex(s => 
    s.id === item.id && s.type === type
  );
  
  if (index > -1) {
    localSelected.value.splice(index, 1);
  } else {
    if (props.multiple) {
      localSelected.value.push({ ...item, type });
    } else {
      localSelected.value = [{ ...item, type }];
    }
  }
  
  emit('update:selectedItems', localSelected.value);
  emit('select', localSelected.value);
};

const isSelected = (item: any, type: ServiceType) => {
  return localSelected.value.some(s => s.id === item.id && s.type === type);
};
</script>

<template>
  <div class="service-item-selector">
    <Tabs v-model:activeKey="activeTab">
      <TabPane key="DRESS" tab="婚纱">
        <div v-if="resources.dresses && resources.dresses.length > 0" class="grid grid-cols-4 gap-4">
          <div 
            v-for="dress in resources.dresses" 
            :key="dress.id"
            :class="['relative cursor-pointer', isSelected(dress, 'DRESS') ? 'ring-2 ring-blue-500 rounded' : '']"
            @click="toggleSelect(dress, 'DRESS')"
          >
            <Checkbox 
              :checked="isSelected(dress, 'DRESS')" 
              class="absolute top-2 right-2 z-10"
            />
            <ResourceCard :resource="dress" type="dress" />
          </div>
        </div>
        <Empty v-else description="暂无婚纱" />
      </TabPane>
      
      <TabPane key="MAKEUP" tab="化妆师">
        <div v-if="resources.artists && resources.artists.length > 0" class="grid grid-cols-4 gap-4">
          <div 
            v-for="artist in resources.artists" 
            :key="artist.id"
            :class="['relative cursor-pointer', isSelected(artist, 'MAKEUP') ? 'ring-2 ring-blue-500 rounded' : '']"
            @click="toggleSelect(artist, 'MAKEUP')"
          >
            <Checkbox 
              :checked="isSelected(artist, 'MAKEUP')" 
              class="absolute top-2 right-2 z-10"
            />
            <ResourceCard :resource="artist" type="artist" />
          </div>
        </div>
        <Empty v-else description="暂无化妆师" />
      </TabPane>
      
      <TabPane key="PHOTOGRAPHY" tab="摄影师">
        <div v-if="resources.photographers && resources.photographers.length > 0" class="grid grid-cols-4 gap-4">
          <div 
            v-for="photographer in resources.photographers" 
            :key="photographer.id"
            :class="['relative cursor-pointer', isSelected(photographer, 'PHOTOGRAPHY') ? 'ring-2 ring-blue-500 rounded' : '']"
            @click="toggleSelect(photographer, 'PHOTOGRAPHY')"
          >
            <Checkbox 
              :checked="isSelected(photographer, 'PHOTOGRAPHY')" 
              class="absolute top-2 right-2 z-10"
            />
            <ResourceCard :resource="photographer" type="photographer" />
          </div>
        </div>
        <Empty v-else description="暂无摄影师" />
      </TabPane>
    </Tabs>
  </div>
</template>

